﻿<template id="single_super_big_button_template">
    <el-button class="single_super_big_button" v-bind="$attrs" :style="{ padding:styles.padding }">
        <el-icon v-if="icon" :style="{ fontSize:styles.iconSize }">
            <component :is="icon"></component>
        </el-icon>
        <span v-if="text" :style="{ fontSize:styles.fontSize,marginTop:styles.textMarginTop }">{{text}}</span>
    </el-button>
</template>
<script type="text/javascript">
    var single_super_big_button = {
        template: "#single_super_big_button_template",
        data() {
            return {
                styles: {
                    padding: "50px",
                    iconSize: "108px",
                    fontSize: "24px",
                    textMarginTop: "30px"
                }
            }
        },
        props: ["icon", "text", "padding", "iconSize", "fontSize", "textMarginTop"],
        methods: {
            init() {
                if (this.padding) this.styles.padding = this.padding;
                if (this.iconSize) this.styles.iconSize = this.iconSize;
                if (this.fontSize) this.styles.fontSize = this.fontSize;
                if (this.textMarginTop) this.styles.textMarginTop = this.textMarginTop;
                if (!this.icon) this.styles.textMarginTop = "0";
            }
        },
        mounted() { this.init(); }
    };
</script>